<template>
    <div class="page-container">
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <h3>账单管理</h3>
            <div>
              <el-button type="primary" icon="Plus" @click="openCreateDialog">创建账单</el-button>
            </div>
          </div>
        </template>
        
        <div class="search-section">
          <el-input
            v-model="searchQuery"
            placeholder="搜索账单号、客户名称"
            style="width: 300px"
            clearable
          >
            <template #append>
              <el-button icon="Search" />
            </template>
          </el-input>
        </div>
        
        <el-table :data="bills" style="width: 100%">
          <el-table-column prop="id" label="账单号" width="180" />
          <el-table-column prop="customer" label="客户名称" />
          <el-table-column prop="date" label="日期" width="120" />
          <el-table-column prop="dueDate" label="到期日" width="120" />
          <el-table-column prop="amount" label="金额" align="right" width="140">
            <template #default="{ row }">
              ¥{{ formatCurrency(row.amount) }}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="120">
            <template #default="{ row }">
              <el-tag :type="getBillStatusType(row.status)" size="small">
                {{ row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="{ row }">
              <el-button size="small">详情</el-button>
              <el-button size="small" type="primary" v-if="row.status === '待支付'">发送</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :total="pagination.total"
            layout="total, sizes, prev, pager, next, jumper"
          />
        </div>
      </el-card>
      
      <!-- 创建账单对话框 -->
      <el-dialog v-model="createDialogVisible" title="创建账单" width="600px">
        <el-form :model="billForm" label-width="100px">
          <el-form-item label="客户名称" required>
            <el-select v-model="billForm.customer" placeholder="请选择客户">
              <el-option label="腾讯云服务" value="1" />
              <el-option label="阿里云服务" value="2" />
              <el-option label="服务器托管商" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="账单金额" required>
            <el-input v-model="billForm.amount" placeholder="请输入金额">
              <template #prepend>¥</template>
            </el-input>
          </el-form-item>
          <el-form-item label="到期日期" required>
            <el-date-picker
              v-model="billForm.dueDate"
              type="date"
              placeholder="选择到期日期"
            />
          </el-form-item>
          <el-form-item label="账单描述">
            <el-input
              v-model="billForm.description"
              type="textarea"
              placeholder="请输入账单描述"
              :rows="3"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="createDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="createBill">创建</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive } from 'vue'
  import { formatCurrency } from '../util/util'
  
  const searchQuery = ref('')
  const createDialogVisible = ref(false)
  
  const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 25
  })
  
  const billForm = reactive({
    customer: '',
    amount: '',
    dueDate: '',
    description: ''
  })
  
  const bills = ref([
    { id: 'INV2023071401', customer: '腾讯云服务', date: '2023-07-14', dueDate: '2023-08-14', amount: 1250.00, status: '已支付' },
    { id: 'INV2023071302', customer: '阿里云服务', date: '2023-07-13', dueDate: '2023-08-13', amount: 3200.00, status: '待支付' },
    { id: 'INV2023071203', customer: '服务器托管商', date: '2023-07-12', dueDate: '2023-08-12', amount: 1800.00, status: '已支付' },
    { id: 'INV2023071104', customer: '客户A公司', date: '2023-07-11', dueDate: '2023-08-11', amount: 8500.00, status: '已支付' },
    { id: 'INV2023071005', customer: '客户B公司', date: '2023-07-10', dueDate: '2023-08-10', amount: 5600.00, status: '已支付' }
  ])
  
  const openCreateDialog = () => {
    createDialogVisible.value = true
  }
  
  const createBill = () => {
    // 模拟创建账单API调用
    console.log('创建账单:', billForm)
    createDialogVisible.value = false
    
    // 重置表单
    Object.assign(billForm, {
      customer: '',
      amount: '',
      dueDate: '',
      description: ''
    })
  }
  
  const getBillStatusType = (status: string) => {
    switch (status) {
      case '已支付':
        return 'success'
      case '待支付':
        return 'warning'
      case '已取消':
        return 'info'
      case '已过期':
        return 'danger'
      default:
        return ''
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .page-container {
    padding: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .search-section {
      margin-bottom: 20px;
    }
    
    .pagination-container {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
  </style>../util/util